<div class="layui-card">
    <div class="layui-card-header">
        <include src="pages/common/breadcrumb.html"/>
    </div>

    <div class="layui-card-body">
        <div class="toolbar">
            <form id="search-form" class="layui-form ">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客服组：</label>
                        <div class="layui-input-inline ">
                            <select name="userOrgId">
                                <option value="">--请选择--</option>
                                <option value="1">公共客服组</option>
                                <option value="2">售前客服组</option>
                                <option value="3">售后客服组</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline  ">
                        <label class="layui-form-label">昵称：</label>
                        <div class="layui-input-inline ">
                            <input name="nick" class="layui-input" maxlength="20" placeholder="输入昵称">
                        </div>
                    </div>

                    <div class="layui-inline ">
                        <label class="layui-form-label">是否客服：</label>
                        <div class="layui-input-inline ">
                            <select name="type" class="layui-select">
                                <option value="">--请选择--</option>
                                <option value="0">非客服</option>
                                <option value="1">客服</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-inline pl20">
                        <button class="layui-btn" data-method="doQuery" type="button">
                            查询
                        </button>


                    </div>


                </div>

            </form>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table theme-table" id="app-table" lay-filter="app-table"></table>
    </div>
</div>


<!--编辑-->
<script type="text/html" id="app-table-model">
    <form id="app-form" lay-filter="app-form" class="layui-form pt20">
        <input type="hidden" name="userId"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">客服昵称:</label>
            <div class="layui-input-block">
                <input type="text" name="imNick" placeholder="请输入客服昵称" autocomplete="off"
                       class="layui-input" lay-verify="required" maxlength="20">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">客服组:</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" name="csOrgIds[1]" title="公共客服组">
                <input type="checkbox" value="2" name="csOrgIds[2]" title="售前客服组" >
                <input type="checkbox" value="3" name="csOrgIds[3]" title="售后客服组">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">是否客服:</label>
            <div class="layui-input-block">
                <input type="checkbox" name="isCs" value="1" title="是" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-form-label">头像：</div>
            <div class="layui-input-block" style="max-width: 1200px">
                <ul class="uploader__files">
                    <input type="hidden" name="avatar" class="uploader__result">
                    <li id="cover-img-btn" class="uploader__input-box"></li>
                </ul>
            </div>
        </div>

        <div class="layui-form-item model-form-footer-center">
            <div class="layui-input-block">
                <button class="layui-btn  " lay-submit lay-filter="form-sub" type="button">保存</button>
                <button class="layui-btn layui-btn-primary " ew-event="closeDialog" type="button">取消</button>
            </div>
        </div>

    </form>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="app-table-bar">
    <a class="layui-btn  layui-btn-xs" lay-event="edit">修改</a>
</script>
<script>

    var methods;
    layui.use(['tools', 'table', 'util', 'setter', 'admin', 'laytpl', 'uploadX'], function () {
        var form = layui.form;
        var tools = layui.tools;
        var table = layui.table;
        var admin = layui.admin;
        var config = layui.setter;
        let uploadX = layui.uploadX;

        form.render();

        //执行方法
        methods = {
            doQuery: function (obj) {
                table.reload('app-table', {where: tools.serialize(), page: {curr: 1}});
            },

            tableRender: function () {
                // 渲染表格
                table.render({
                    elem: '#app-table',
                    url: '/plm/api/im/user/userList',
                    method: 'GET',
                    where: tools.serialize(),
                    page: true,
                    cols: [[
                        {
                            field: 'avatar', title: '头像', width: 150, templet: function (d) {
                            return d.avatar ? tools.format('<img   tb-img style="cursor: zoom-in;height: 100%;"   src="{0}">',tools.getImage(d.avatar)) :
                                '<i class="layui-icon layui-icon-service" style="font-size: 28px;color: #00a9ee"></i>';
                        }
                        },
                        {field: 'username', title: '员工账号', width: 200},
                        {field: 'imNick', title: '客服昵称', width: 200},
                        {
                            field: '', title: '是否客服', width: 200, templet: function (e) {
                            if (e.isCs == 0) {
                            } else if (e.isCs == 1) {
                                return '是'
                            }
                            return "否"
                        }
                        },
                        {
                            field: 'csOrgIds', title: '客服组', width: 200, templet: function (d) {
                            var text = "";
                            var csOrgIds = "," + d.csOrgIds + ",";
                            if (csOrgIds.indexOf('1,')) {
                                text += "公共客服组,"
                            } else if (csOrgIds.indexOf(',2,')) {
                                text += "售前客服组,"
                            } else if (csOrgIds.indexOf(',3,')) {
                                text += "售后客服组"
                            }
                            return text.substring(0,text.length-1);
                        }
                        },
                        {
                            field: '', title: '操作', toolbar: '#app-table-bar'
                        }
                    ]],
                    done: function () {
                        /* 点击图片放大 */
                        $("[tb-img]").click(function () {
                            layer.photos({
                                photos: {data: [{src: tools.getImage($(this).attr('src'), 'l')}]},
                                shade: .1,
                                closeBtn: true
                            });
                        })
                    }

                });
            },
            toolEvent: function () {
                table.on('tool(app-table)', function (obj) {
                    tools.putTempData('employee-info', obj.data);
                    var data = obj.data;
                    var layEvent = obj.event;
                    if (layEvent == 'edit') {
                        methods.showEditModel(data)
                    }
                })
                form.on('submit(form-sub)', function (data) {
                    if (data.field.isCs == 1) {
                        data.field.grantType = 1;
                    } else {
                        data.field.grantType = 2;
                    }
                    var csOrgIds="";
                    if(data.field["csOrgIds[1]"]){
                        csOrgIds+='1,';
                    }
                    if(data.field["csOrgIds[2]"]){
                        csOrgIds+='2,';
                    }
                    if(data.field["csOrgIds[3]"]){
                        csOrgIds+='3,';
                    }
                    if(!csOrgIds){
                        layer.msg("请选择客服组")
                    }
                    data.field.csOrgIds=csOrgIds;
                    //修改客服
                    tools.postJSON({
                        url: '/plm/api/im/user/updateCs',
                        params: data.field,
                    }).done(function (res) {
                        layer.closeAll("loading");
                        if (0 == res.code) {
                            layer.closeAll();
                            layer.msg(res.msg, {icon: 1});
                            methods.doQuery();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    })

                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            },
            showEditModel(data) {
                var title = "修改客服";
                admin.popupRight({
                    title: title,
                    content: $('#app-table-model').html(),
                    success: function (layero, index) {
                        var csOrgIds=data.csOrgIds;
                        if(csOrgIds){
                            if(csOrgIds.indexOf("1,")>-1){
                                data['csOrgIds[1]']=true;
                            }
                            if(csOrgIds.indexOf("2,")>-1){
                                data['csOrgIds[2]']=true;
                            }
                            if(csOrgIds.indexOf("3,")>-1){
                                data['csOrgIds[3]']=true;
                            }
                        }

                        form.val("app-form", data)
                        //显示图片
                        uploadX.displayImage();
                        form.render();
                        uploadX.uploadImage({
                            elem: '#cover-img-btn'
                        });
                    }
                });
            },
        }
        tools.includeHtml(function () {
            $(this).vm({"headerTitle": "客服账号"});
        })
        methods.tableRender();
        methods.toolEvent();
    });


</script>


